import React from 'react';
import {Button, message} from 'antd';
import {Link} from 'umi';
import {getStore, removeStore} from "@/utils/store";
import {AUTH_INFO} from "@/common/constant";
import {Menu, Dropdown} from 'antd';
import {history} from "@@/core/history";

function outLogin() {
  removeStore({
    name: AUTH_INFO,
    type: false
  });
  message.success("退出成功");
  history.push(`/`);
}

export default function Header(props) {
  let authInfo = getStore({
    name: AUTH_INFO,
  });
  const menu = (
    <Menu>
      <Menu.Item>
        <Link to="/cms/welcome">个人中心</Link>
      </Menu.Item>
      <Menu.Item>
        <a onClick={outLogin}>退出登录</a>
      </Menu.Item>
    </Menu>
  );
  return (
    <header {...props}>
      <a className="logo-wrapper" target="_blank">
        <i className="logo"/>
        <span>诗甜智慧学习助手</span>
      </a>
      {(authInfo?.member_id === undefined || authInfo?.member_id === null) && <div className="button">
        <Link to="/user/login">
          <Button><span>登录</span></Button>
        </Link>
      </div>}
      {authInfo?.member_id && <div className="button">
        <Dropdown overlay={menu}>
          <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
            {authInfo.username}
          </a>
        </Dropdown>
      </div>}
      <div className="button-style1">
        <Link to="HelloWorld">
          <Button className="Button">HelloWorld</Button>
        </Link>
      </div>
      <div className="button-style1">
        <Link to="/">
          <Button className="Button">主页</Button>
        </Link>
      </div>
    </header>
  );
}
